<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法4</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1：v-model双向绑定</h1>
        <h3>我们可以使用v-model指令在表单input,textarea,select等元素
            双向绑定，它会根据控件的类型自动获取正确的方法来更新元素
            ，v-model会忽略所有表单元素的value，checked，selected
            等属性的初始值，他始终会将当前的JavaScript状态视为数据的
            正确来源
        </h3>
        <h3>1.单行文本框</h3>
        用户名：<input type="text" v-model="singleText"><br>
        输入的用户名是：{{singleText}}
        <h3>2.多行文本框</h3>
        个人简介<textarea name="" id="" v-model="multiText"></textarea><br>
        输入的个人简介是：{{multiText}}
        <h3>3.单选框在实际中是不能单独使用的，一般是两个以上
            要设置一个v-model统一的变量，这样就可以实现radiogroup的效果
        </h3>
        性别：<input type="radio" value="M" v-model="radioValue">11
        <input type="radio" value="F" v-model="radioValue">22<br>
        输入的性别是：{{radioValue}}
        <h3>4.单个复选框：常用true或false的选择</h3>
        <input type="checkbox" v-model="toggleValue">是否是否<br>
        选择的结果是：{{toggleValue}}
        <h3>5.多个多选框：使用v-model接受数组类型的变量</h3>
        <input type="checkbox" value="美美" v-model="checkedValue">1111
        <input type="checkbox" value="帅" v-model="checkedValue">2222
        <input type="checkbox" value="棒" v-model="checkedValue">3333
        <br>
        你选择的品质是：{{checkedValue.join(',')}}
        <h3>6.单向下拉框</h3>
        <select name="" id="" v-model="singleSelect">
            <option value="杭州">杭州</option>
            <option value="台州">台州</option>
            <option value="温州">温州</option>
            <option value="湖州">湖州</option>
        </select>
        <p>原来你是{{singleSelect}}来的啊</p>
        <h3>7.多项选择框</h3>
        <select name="" id="" multiple v-model="multiSelect">
            <option value="a">吃饭</option>
            <option value="b">喝水</option>
            <option value="c">跳舞</option>
        </select>
        <p>你的选择有{{multiSelect.join(',')}}</p>
       
        <h1>课堂练习</h1>
        用户名：<input type="text" v-model="tid"><br>
        密码: <input type="password" v-model="pass1"><br>
        确认密码: <input type="password" v-model="pass2"  @blur="blur1()"><br>
        性别: <input type="radio" v-model="FM" value="男生">男 <input type="radio" v-model="FM" value="女生">女<br>
        籍贯: <select name="" id="">
            <option value="台州" v-model="address">台州</option>
            <option value="湖州" v-model="address">湖州</option>
        </select><br>
        选择的课外课程: <input type="checkbox" value="吉他" v-model="lo">吉他 
        <input type="checkbox" value="国画" v-model="lo">国画
         <input type="checkbox" value="街舞" v-model="lo">街舞
<input type="submit" value="提交" @click="submit()">
<h1>v-model修饰符</h1>
<h3>1. .lazy修饰符</h3>
<input type="text" v-model.lazy="text">{{text}}
<input type="text" v-model.number="num">{{num+1}}
<h3>3. .trim修饰符</h3>
<input type="text" v-model.trim="text">{{text+"你好"}}
    </div>
</body>
</html>
<script>
    const connApp = Vue.createApp({
        data() {
            return {
                singleText:'我是初始值',
                multiText:'',
                radioValue:'',
                toggleValue:false,
                checkedValue:[],
                singleSelect:'',
                multiSelect:[],
                tid:'',
                FM:'',
                address:'',
                lo:[],
                pass1:'',
                pass2:''
            }
        },
    
        methods: {
        submit(){
            alert("用户名是"+this.tid+"性别为"+this.FM+"籍贯是"+this.address+"喜欢的课程:"+this.lo)
        },
        blur1(){
        if(this.pass1 != this.pass2){
            alert("两次输入的密码不同")
            this.pass1 = this.pass2 
            =''
        }
    }
    }
    }).mount("#app")
</script>